import dash_bootstrap_components as dbc
from dash import html, Input, Output, callback

# 整体布局
button_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('Button: 按钮组件使用示例，不同样式的按钮，用ButtonGroup组件将一系列按钮分组在一行上', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Button("按钮样式1", color="primary", className="me-1"),
        dbc.Button("按钮样式2", color="secondary", className="me-1"),
        dbc.Button("按钮样式3", color="success", className="me-1"),
        dbc.Button("按钮样式4", color="warning", className="me-1"),
        dbc.Button("按钮样式5", color="danger", className="me-1"),
        dbc.Button("按钮样式6", color="info", className="me-1"),
        dbc.Button("按钮样式7", color="light", className="me-1"),
        dbc.Button("按钮样式8", color="dark", className="me-1"),
        dbc.Button("按钮样式9", color="link"),
        html.Hr(),
        dbc.Button("点击计数=", id='btn01', class_name='me-2', n_clicks=0),
        html.Span(id='text01', style={'verticalAlign': 'middle'}),
        html.Hr(),
        html.P(html.Strong('按钮组示例', style={'color': 'rgb(255, 153, 51)'}),),
        dbc.ButtonGroup(
            [
                dbc.Button('left', color='danger'),
                dbc.Button('middle', color='warning'),
                dbc.Button('right', color='success')
            ]
        )
    ]
)

@callback(Output('text01', 'children'), [Input('btn01', 'n_clicks')])
def on_button_click(n):
    if n is None:
        return '没有点击'
    else:
        return f'点击了 {n} 次'